<template>
  <div class="margin-container-list pad-t-15">
    <div class="top-operate">
      <div class="float-l">
        <el-input v-model="taskNameSearch" placeholder="请输入搜索关键字" style="width: 300px"></el-input>
        <el-date-picker
          v-model="startDate"
          type="datetime"
          format="yyyy-MM-dd"
          placeholder="开始日期"
          value-format="yyyy-MM-dd HH:mm:ss"
          default-time="00:00:00">
        </el-date-picker>
        <el-date-picker
          v-model="endDate"
          type="datetime"
          format="yyyy-MM-dd"
          placeholder="结束日期"
          value-format="yyyy-MM-dd HH:mm:ss"
          default-time="23:59:59"
        >
        </el-date-picker>
        <el-button type="primary" @click="handleSearch">查询</el-button>
      </div>
      <br>
      <div class="float-l pad-t-10 pad-b-15">
          <el-button @click="handleUse" >批量启用</el-button>
          <el-button @click="handleStop" >批量禁用</el-button>
      </div>
    </div>
    <!-- 内容列表 -->
    <div class="table-container pad-t-10">
      <el-table :data="posterList" @selection-change="handleSelectionChange" v-loading="listLoading"
                element-loading-text="加载中" style="width: 100%">
        <el-table-column width="55px" type="selection" ></el-table-column>
        <el-table-column min-width="240px" label="任务名称" prop="taskName"></el-table-column>
        <el-table-column min-width="240px" label="任务酬金" prop="budgetAmount"></el-table-column>
        <el-table-column min-width="240px" label="报名开始时间" prop="enrollStartTime"></el-table-column>
        <el-table-column min-width="240px" label="报名结束时间" prop="enrollEndTime"></el-table-column>
        <el-table-column min-width="240px" label="任务状态" prop="taskStatus">
          <template slot-scope="scope">
            <template v-if="scope.row.taskStatus == 40">
              报名中
            </template>
            <template v-else>
              已结束
            </template>
          </template>
        </el-table-column>
        <el-table-column min-width="140px" label="操作" align="right" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" size="medium" @click="showDetail(scope.row)">查看海报样式</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 列表分页 -->
    <div class="pagination">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :current-page="posterListQuery.currentPage"
                     :page-sizes="[10, 20, 50, 100]" :page-size="posterListQuery.size"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="total">
      </el-pagination>
    </div>
    <el-dialog :visible.sync="qrCodeVisible" width="294px" class="poster-dialog">
      <div class="poster-bar" v-if="itemData">
        <h3>{{ itemData.taskName }}</h3>
        <label>￥{{itemData.budgetAmount / itemData.budgetNum | estimateFilter }}<em>/张</em></label>
        <p class="first">报名时间</p>
        <p>{{itemData.enrollStartTime}} -- {{itemData.enrollEndTime}}</p>
      </div>
    </el-dialog>
  </div>
</template>


<style lang="less" scoped>
.poster-bar{
  background:url('../../../assets/images/poster-bg.jpg') no-repeat;
  width: 294px;
  height: 522px;
  text-align: center;
  padding: 193px 20px 0 20px;
  h3{
    font-weight: normal;
    color: #353535;
    margin: 8px 0;
    padding: 0;
    height: 36px;
    line-height: 1.3;
    font-size: 14px;
    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    word-break:break-word;
    &:before{
      content: '';
      display: inline-block;
      vertical-align: top;
      width: 6px;
      height: 6px;
      background: #f72323;
      border-radius: 100px;
      margin-top: 6px;
      margin-right: 8px;
    }
    &:after{
      content: '';
      display: inline-block;
      vertical-align: top;
      width: 6px;
      height: 6px;
      background: #f72323;
      border-radius: 100px;
      margin-top: 6px;
      margin-left: 8px;
    }
  }
  label{
    background: #ffe684;
    border-radius: 6px;
    color: #f71112;
    min-width: 100px;
    display: inline-block;
    padding: 9px 10px;
    font-size: 15px;
    em{
      color: #353535;
      font-style: normal;
      font-weight: normal;
      font-size: 10px;
    }
  }
  p{
    margin: 0;
    padding: 0;
    &.first{
      padding: 8px 0 2px 0;
    }
  }
}
</style>

<script>
  import { pagingTaskPoster, updateTaskPosterStatus } from '@/api/project/taskInfo'
  import elDragDialog from '@/directive/el-dragDialog' // base on element-ui
  import Tinymce from '@/components/Tinymce'
  import QRCode from 'qrcode'

  export default {
    components: { Tinymce, QRCode },
    directives: {
      // 拖动窗口
      elDragDialog
    },
    data() {
      return {
        posterList: [],
        taskStatus: null,
        total: null,
        listLoading: true,
        multipleSelection: [],
        posterListQuery: {
          currentPage: 1,
          size: 10,
          enterpriseId: this.getEnterpriseId(),
          enrollStartTime: null,
          enrollEndTime: null,
          taskName: ''
        },
        poster: {
          posterId: null,
          delFlag: 0,
          title: '',
          content: '',
          category: '',
          author: ''
        },
        dict: {},
        taskNameSearch: '',
        startDate: null,
        endDate: null,
        itemData: {},
        qrCodeUrl: '',
        qrCodeVisible: false // 是否显示弹板
      }
    },

    // 初始化页面
    created() {
      this.initPosterList()
    },
    filters: {
      estimateFilter(e) {
        if (e === Infinity) {
          return 0
        } else if (isNaN(e)) {
          return 0
        } else {
          const num = Number(parseFloat(e).toFixed(3).slice(0, -1))
          return num
        }
      }
    },
    methods: {
      initPosterList() {
        this.posterListQuery['enrollStartTime'] = this.startDate
        this.posterListQuery['enrollEndTime'] = this.endDate
        this.posterListQuery['taskName'] = this.taskNameSearch
        this.listLoading = true
        pagingTaskPoster(this.posterListQuery).then(response => {
          this.posterList = response.records
          this.total = response.total
          this.listLoading = false
          this.dict = response.dict
        })
      },
      // 更改当前页面大小
      handleSizeChange(val) {
        this.posterListQuery.size = val
        this.initPosterList()
      },
      // 更改当前页数
      handleCurrentChange(val) {
        this.posterListQuery.currentPage = val
        this.initPosterList()
      },
      // 勾选
      handleSelectionChange(val) {
        this.multipleSelection = val
      },
      // 查询
      handleSearch() {
        this.posterListQuery.currentPage = 1
        this.initPosterList()
      },
      // 创建订阅分类时，清除订阅分类值
      resetPoster() {
        this.poster = {
          posterId: null,
          title: '',
          content: '',
          category: '',
          author: ''
        }
      },
      // 弹窗订阅分类名搜索
      querySearch(queryString, cb) {
        var agentList = this.agentList
        var results = queryString ? agentList.filter(this.createFilter(queryString)) : agentList
        // 调用 callback 返回建议列表的数据
        cb(results)
      },
      createFilter(queryString) {
        return (restaurant) => {
          return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
        }
      },
      handleSelect(item) {
        const agentId = item.agentId
        this.poster.agentId = agentId
      },
      handleUse() {
        var that = this
        const multipleSelection = this.multipleSelection
        const array = []
        multipleSelection.forEach((e) => {
          array.push(e.detailId)
        })
        updateTaskPosterStatus(array, '1').then(response => {
          that.initPosterList()
        })
      },
      handleStop() {
        const that = this
        const multipleSelection = this.multipleSelection
        const array = []
        multipleSelection.forEach((e) => {
          array.push(e.detailId)
        })
        updateTaskPosterStatus(array, '0').then(response => {
          that.initPosterList()
        })
      },
      // 详情
      showDetail(row) {
        this.qrCodeVisible = true
        this.itemData = row
        this.itemData.enrollStartTime = this.itemData.enrollStartTime.substring(0, 10)
        this.itemData.enrollEndTime = this.itemData.enrollEndTime.substring(0, 10)
        // const that = this
        // QRCode.toDataURL(row.posterUrl)
        //   .then(url => {
        //     that.qrCodeUrl = url
        //     that.qrCodeVisible = true
        //   })
        //   .catch(err => {
        //     console.error(err)
        //   })
      }
    }

  }
</script>
